<template>
	<div class="main-wrapper pcc-wrapper">
		<div class="header">
			<div class="head-img" ref="headImg">
				<img :src="defaultHeadImg" alt="">
			</div>
			<div class="username" style="text-align:center;padding-top:.3rem;">{{userInfo.username}}</div>
		</div>
		<div class="user-info">
			<group>
				<cell title="手机号" value="13512365478"></cell>
				<cell title="积分" value="9999"></cell>
			</group>
	
			<XButton @click.native="mylogout()" 
					 style="margin-top:.5rem;" 
					 action-type="button" 
					 type="primary">退出登录</XButton>
		</div>
	</div>
</template>
<script>
import checkLogin from '../myUtils/checkLogin';
import { mapGetters, mapActions } from 'vuex';
import { Cell, Group, XButton } from 'vux';
import defaultHeadImg from '../assets/logo.png';
export default {
	data() {
		return {
			defaultHeadImg: defaultHeadImg
		}
	},
	methods: {
		...mapActions(['logout']),
		mylogout() {
			localStorage.state = null;
			this.logout();
			this.$router.push({ name: 'login' });
		}
	},
	components: {
		Cell, Group, XButton
	},
	created() {
		checkLogin(this);
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mounted() {
		// this.$refs.headImg.style.backgroundColor = this.defaultHeadImg;
	},
}
</script>
<style>
.pcc-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #E6E6E6;
}

.head-img {

	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
}

.head-img>img {
	width: 3rem;
	height: 3rem;
	border-radius: 1.5rem;
}

.header,
.user-info {
	background-color: white;
	padding: .4rem 0;
	align-self: stretch;
}

.user-info {
	flex: auto;
}
</style>
